<template>
  <div>
    <el-form :model="myForm" status-icon :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="昵称" prop="nickName">
        <el-input type="text" v-model="myForm.nickName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="src" class="srcItem">
        <div v-show="false">
          <el-input v-model="myForm.src"></el-input>
        </div>
        <div v-show="myForm.src" class="srcSpan" >
          <el-image class="el-img" :src="myForm.src" :preview-src-list="[myForm.src]"></el-image>
          <i class="el-icon-circle-close delSrc" @click="delSrc"></i>
        </div>
        <my-uploader  v-show="!myForm.src" :config="config" ref="myUploader" @fileQueued="fileQueued" @uploadProgress="uploadProgress" @uploadSuccess="uploadSuccess"/>
      </el-form-item>
    </el-form>
    <div class="btns" style="text-align:center;">
      <el-button type="primary" @click="submitForm('myForm')">提交</el-button>
    </div>
  </div>
</template>

<script>
import BetterUtilTools from 'better-util-tools';

const _ = new BetterUtilTools();
export default {
    data() {
        return {
            'config':{
                'id':'uploadAvatar',
                'options':{
                    'fileNumLimit':1,
                    'pick': {
                        'id': '#pickerAvatar',
                        'multiple': false
                    },
                    'accept': [
                        {
                            'title': 'Images',
                            'extensions': 'gif,jpg,jpeg,bmp,png',
                            'mimeTypes': 'image/*'
                        }
                    ]
                }

            },
            'rules':{
                'nickName': [
                    { 'required': true, 'message': '昵称不能为空', 'trigger': 'blur' }
                ],
                'src': [
                    { 'required': true, 'message': '头像不能为空', 'trigger': 'change' }
                ]
            },
            'myForm':{}
        };
    },
    'computed':{
        myUploader(){
            return this.$refs.myUploader;
        }
    },
    created(){
        const {userInfo} = this.$store.state;
        const {
            nickName,src,id
        } = userInfo;
        this.myForm = {
            nickName,
            src,
            id
        };
    },
    'methods': {
        delSrc(){
            this.myForm.src='';
            this.myUploader.reset();
        },
        fileQueued(file){
            console.log(file);
            this.myUploader.uploaderStart();
        },
        uploadProgress({file,percentage}){
            // console.log(file, percentage);
        },
        uploadSuccess(res){
            this.myForm.src=res.data[0];
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$emit('sure',this.myForm);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
  .srcItem{
    position: relative;
    .srcSpan{
      height: 250px;
      background: #ccc;
      .el-img{
        width: 100%;
        height:100%;
      }
      .delSrc{
        vertical-align: top;
        position: absolute;
        right: 5px;
        top: 4px;
        font-size: 28px;
        color: #fff;
        z-index: 2;
        cursor: pointer;
      }
    }
  }
</style>
